<label-panel>
    <style>
        .li-fpoints{
            margin: 5px 0px;
            border-radius: 6px;
            width: 100%;
            list-style: none;
        }
        .drag-handler{
            width : 20%;
            background-color: lightgray;
            cursor: move;
        }
        #fpoints-list { list-style-type: none; margin: 0; padding: 0; margin-bottom: 10px; }
        #feature-points-list {
            margin-top: 10px;
            overflow-x: hidden;
        }
        .sortable-placeholder {
            margin: 5px 0px;
            padding:10px;
            background:yellow;
            color: black;
        }

        .selectedPoint{
            width : 20%;
            background-color: #17a2b8;
            cursor: move;
        }

        #category-select-box{
            background-color: white;
            width: 100%;
        }
        .es-list{
            color: #101010;
        }

        .animated {
          -webkit-animation-duration: 800ms;
          animation-duration: 800ms;
          -webkit-animation-fill-mode: both;
          animation-fill-mode: both;
        }

        @-webkit-keyframes slideOutRight {
          from {
            -webkit-transform: translate3d(0, 0, 0);
            transform: translate3d(0, 0, 0); }
          to {
            visibility: hidden;
            -webkit-transform: translate3d(100%, 0, 0);
            transform: translate3d(100%, 0, 0); }
        }

        @keyframes slideOutRight {
          from {
            -webkit-transform: translate3d(0, 0, 0);
            transform: translate3d(0, 0, 0); }
          to {
            visibility: hidden;
            -webkit-transform: translate3d(100%, 0, 0);
            transform: translate3d(100%, 0, 0); }
        }

        .slideOutRight {
          -webkit-animation-name: slideOutRight;
          animation-name: slideOutRight;
        }

        .input-group-btn{
          cursor: pointer
        }

    </style>
    <div class="d-flex flex-column" style="height: 100%;">
        <div ref="category-data" class="mb-2 mt-2">
            Category Name
            <select id="category-select-box" class="form-text">
                <option each={category in suggestedCategories} selected={category === targetShape.category}>{category}</option>
            </select>
        </div>
        <div ref="label-data" class="mb-2 mt-2">
            Label Name
            <input type="text" class="form-text w-100" value="{ targetShape.label }" onchange={updateLabel} placeholder="Label the shape, Eg: face, clock ..">
        </div>
        <div ref="label-data" class="mb-2 mt-2">
            <attributes-list attributes={targetShape.attributes}></attributes-list>
        </div>
        <div ref="label-data" class="mb-2 mt-2">
            Tags <small>(separated by comma)</small>
            <div id="tags-input-box" class="input tagarea clearfix"></div>
        </div>
        <p class="mb-2">Feature Points  <small>{ this.targetShape.featurePoints.length }</small></p>
        <div id="feature-points-list" >
            <ul id="fpoints-list">
                <li class="li-fpoints grey-border" each={fPoint,fid in targetShape.featurePoints}>
                    <div class="input-group small">
                        <span class={selectedPoint: fPoint.id === this.opts.pointId, input-group-addon: true, drag-handler: fPoint.id !== this.opts.pointId} onclick={updateFPointSelected}></span>
                        <input type="text" class="form-control" value="{ fPoint.label }" onchange={updateFPointLabel} placeholder="Label the feature point">
                        <div class="input-group-btn" onclick={deleteTag}>
                            <i class="icon icon-trash-empty"></i>
                        </div>
                    </div>
                </li>
            </ul>
        </div>
    </div>
    <script>
        var tag = this;
        tag.targetShape = getShape(this.opts.id);
        tag.tags = tag.targetShape.tags.join(", ");

        tag.updateFPointSelected = function(e){
            eventBus.trigger('selectFeaturePoint', e.item.fPoint.id, opts.id);
            e.stopPropagation();
        }

        tag.updateTags = function(e){
            tag.targetShape.tags = e.target.value.split(",").map(function(item) {
                return item.trim();
            });
        }

        tag.updateLabel = function(e){
            tag.targetShape.label = e.target.value;
        }

        tag.deleteTag = function(e){
          $(e.target).parents('li')
            .addClass('animated slideOutRight')
            .one('webkitAnimationEnd mozAnimationEnd MSAnimationEnd oanimationend animationend',function(){
                detachPointByIndex(opts.id, e.item.fid);
                tag.update();
                eventBus.trigger('removeWorkAreaFeaturePoint');
            });
        }

        tag.updateFPointLabel = function(e){
            tag.targetShape.featurePoints[e.item.fid].label = e.target.value;
        }

        tag.on('mount',function(){
            $( "#fpoints-list" ).sortable({
                axis: "y",
                placeholder: 'sortable-placeholder',
                opacity: 0.6,
                helper: 'clone',
                sort: function(event,ui){
                    $(ui.placeholder).html('Drop me at position ' + Number($('#fpoints-list > li:visible').index(ui.placeholder)+1));
                },
                update : function(event,ui){
                    var newIndex = ui.item.index();
                    var oldIndex = ui.item[0]._tag.fid;
                    array_move(tag.targetShape.featurePoints,oldIndex,newIndex);
                    tag.update();
                }
            });

            $("#category-select-box")
                .editableSelect()
                .on('select.editable-select', function (e, li) {
                    //console.log(li.val() ,",", li.text() );
                    //Update Category
                    tag.targetShape.category = li.text().toLowerCase();
                });

            $("#category-select-box").on('keyup', function(e){
                //Add
                var val = $(this).val().toLowerCase();
                if(e.keyCode === 13 && suggestedCategories.indexOf(val) === -1){
                    $("#category-select-box").editableSelect('add', val, 0);
                    suggestedCategories.push(val);
                    tag.targetShape.category = val;
                }
            });

            var tagInputBox = new Taggle('tags-input-box', {
                tags: tag.targetShape.tags,
                duplicateTagClass: 'bounce',
                onTagAdd : function(event, tagText){
                    tag.targetShape.tags.push(tagText);
                    if(suggestedTags.indexOf(tagText) === -1){
                        suggestedTags.push(tagText);
                    }
                },
                onTagRemove : function(event, tagText){
                    tag.targetShape.tags.splice(tag.targetShape.tags.indexOf(tagText), 1);
                },
            });

            var tagInputBoxContainer = tagInputBox.getContainer();
            var tagInputBoxInput = tagInputBox.getInput();

            $(tagInputBoxInput).autocomplete({
                source : suggestedTags,
                // appendTo: tagInputBoxContainer,
                appendTo: $("#tags-input-box"),
                position: { at: "left bottom", of: $("#tags-input-box") },
                messages: {
                    noResults: '',
                    results: function() {}
                },
                select: function(event, data) {
                    event.preventDefault();
                    // Add the tag if user clicks
                    if (event.which === 1) {
                        tagInputBox.add(data.item.value);
                    }
                }
            })

            // Make sure panel label is always empty on init of work area
            eventBus.on('unmountLabelPanel', () => {
                // Must pass in true to only unmount the children
                tag.unmount(true);
            })

            // Use event bus to listen to removeTag events
            eventBus.on('removeLabelPanelTag', () => {
                tag.targetShape = getShape(tag.opts.id);
                // Unmount when targetShape is removed
                if (!tag.targetShape) {
                    // Must pass in true to only unmount the children
                    tag.unmount(true);
                } else {
                    tag.update();
                }
            });
        })

        tag.on('unmount', function() {
            eventBus.off('removeLabelPanelTag');
            eventBus.off('unmountLabelPanel');
        })

        function array_move(arr, old_index, new_index) {
            if (old_index > new_index){
                var temp = arr[old_index];
                for(;old_index > new_index; old_index--){
                    arr[old_index] = arr[old_index - 1];
                }
                arr[new_index] = temp;
            } else{
                var temp = arr[old_index];
                for(;old_index < new_index; old_index++){
                    arr[old_index] = arr[old_index + 1];
                }
                arr[new_index] = temp;
            }
        };
    </script>
</label-panel>
